

import EventBus from "../../EventBus"
import { mouseStatus } from "../../lib/const"
import { getCmTree, getDashboardAndCategoryTreeByType } from "@/api/multidimensionalAnalysis"
import "./index.less"


export default {
  name: "Analysis",
  data() {
    return {
      myAnalysisList: [], // getList("myAnalysis"),
      commonAnalysisList: [],// getList("commonAnalysis"),
      myCreateAnalysisList: [],
      myCollectionAnalysisList: [],
      activeName: "analysis",
      replaceFields: {children:"children", title:"name", key:"id", draggable: true }
    }
  },
  methods: {
    handleDragStart(data,event){

      // 保留当前鼠标距离选中元素的偏移量
      const mouseOffset = {
        x: event.offsetX,
        y: event.offsetY
      }
      console.log(JSON.stringify({data, mouseOffset, type: "analysis"}))
      event.dataTransfer.setData("data", JSON.stringify({data, mouseOffset, type: "analysis"}))
      EventBus.$emit("mouseStatusChange", mouseStatus.ADD_DRAG)
    },
    handleCheck(e){
      console.log(e)
    },
    renderTree(title, list){
      return (
        <div>
          <div class="title">{title}</div>
          <a-tree show-line show-icon>
            {
              list.map(item => this.renderTreeItem(item))
            }
          </a-tree>
        </div>
      )
    },
    renderTreeItem(treeNode){
      const {id, name, children, chartName, treeObj} = treeNode
      const list = treeObj && treeObj.length > 0 ? treeObj : children
      return (
        <a-tree-node
          key={id}
          title={<div onDragstart={e=> this.handleDragStart(treeNode, e)} slot='title' draggable={!!chartName}>{name}</div>}>
          {
            list && list.map(item => this.renderTreeItem(item))
          }
        </a-tree-node>
      )

    },
    renderBoardTree(title, list){
      return (
        <div>
          <div class="title">{title}</div>
          <a-tree show-line show-icon>
            {
              list.map(item => this.renderBoardTreeItem(item))
            }
          </a-tree>
        </div>
      )
    },
    renderBoardTreeItem(treeNode, isComponentList){
      const {id, name, children, treeObj, itemList} = treeNode
      let list = treeObj && treeObj.length > 0 ? treeObj : children
      // 如果当前是组件列表
      if(isComponentList){
        return (
          <a-tree-node
            key={id}
            title={<div onDragstart={e=> this.handleDragStart(treeNode, e)} slot='title' draggable={true}>{name}</div>}>
            {
              list && list.map(item => this.renderTreeItem(item))
            }
          </a-tree-node>
        )
      }
      else {
        // 判断当前是否是看板,如果是,则下一层渲染组件列表
        const isBoard = !treeObj
        if(isBoard){
          list = itemList
        }
        return (
          <a-tree-node key={id} title={name} >
            {
              list && list.map(item => this.renderBoardTreeItem(item, isBoard))
            }
          </a-tree-node>
        )
      }


    },
    getData(name){
      getCmTree({
        name,
        type: "1"
      })
      .then(data=>{
        this.myAnalysisList = data.data
      })
      getCmTree({
        name,
        type: "2"
      })
      .then(data=>{
        this.commonAnalysisList = data.data
      })
      getDashboardAndCategoryTreeByType({
        name,
        type: "1" // 1
      })
      .then(data=>{
        this.myCreateAnalysisList = data.data
      })
      getDashboardAndCategoryTreeByType({
        name,
        type: "2" // 2
      })
      .then(data=>{
        this.myCollectionAnalysisList = data.data
      })

    },
    handleSearchChange(event){
      const title = event.target.value.trim()
      this.getData(title)
    }
  },
  components: {
  },
  created(){
    this.getData()

  },
  render(){
    const {
      myAnalysisList,
      commonAnalysisList,
      myCreateAnalysisList,
      myCollectionAnalysisList,
      handleSearchChange
    } = this
    // 防抖
    const debounce = (fn, wait) => {
      let timeout = null
      return function(event) {
        // event.persist()
        if (timeout !== null) clearTimeout(timeout)
        timeout = setTimeout(fn, wait, event)
      }
    }
    return (
      <div class="analysis-container">
        <a-input placeholder="请输入搜索关键字" onChange={debounce(handleSearchChange, 400)} class="title-search">
          <a-icon slot="prefix" type="search" />
        </a-input>
        <div class="list">
          { this.renderTree("我的组件", myAnalysisList) }
          { this.renderTree("公共组件", commonAnalysisList) }
          { this.renderBoardTree("我创建的看板", myCreateAnalysisList) }
          { this.renderBoardTree("我收藏的看板", myCollectionAnalysisList) }
        </div>
      </div>
    )
  }
}

